<template>
  <div class="user-join">
    <div class="box">
      <div class="center">
        <p class="p1">登陆账号</p>
        <p class="p2">虾米 - 严选商城欢迎您</p>

        <van-form>
          <van-field
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
            right-icon="phone-o"
          />
          <van-field
            v-model="password"
            :type="pwd"
            name="密码"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          >
            <template #right-icon>
              <span @click="showPwd"><van-icon :name="icon" /></span>
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button
              block
              type="info"
              size="normal"
              color="linear-gradient(135deg, #e570e7 0%, #79f1fc 100%)"
              @click="addUser"
            >登录</van-button>
          </div>
        </van-form>

        <p class="p3">忘记密码</p>
        <p class="p4">还没有注册？ 立即注册</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      pwd:"password",
      num:0,
     icon:'closed-eye'
    };
  },
  methods: {
      showPwd(){
          this.num++;
      if(this.num%2!=0){
        this.pwd='text'
        this.icon = 'browsing-history-o'
      }else if(this.num%2==0){
        this.pwd='password'
        this.icon = 'closed-eye'
      }
      },
      addUser(){
        var obj ={
          mobile:this.username,
          pwd:this.password
        }
        this.$store.dispatch("REGISTER",obj)
        this.$router.push({
          path:"/"
        })
      }
  },
};
</script>

<style scoped>
.user-join {
  width: 100%;
  height: 100%;
}
.box {
  padding: 0.26rem;
}
.center {
  width: 5.8rem;
  padding: 0 0.44rem;
  height: 8rem;
  border: 0.02rem solid #f5f5f5;
  border-radius: 0.06rem;
}
.p1 {
  font-size: 0.5rem;
  color: #666;
  margin-top: 0.44rem;
}
.p2 {
  font-size: 0.3rem;
  color: #909090;
  margin-top: 0.36rem;
}
.p3 {
  font-size: 0.26rem;
  color: #989898;
  width: 100%;
  text-align: center;
  margin-top: 0.36rem;
}
.p4 {
  color: #549ff9;
  font-size: 0.3rem;
  width: 100%;
  text-align: center;
  margin-top: 0.38rem;
}
</style>